<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2022-11-11 15:02:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-06-18 11:42:42
 * @FilePath: Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="user-info-box">
        <SearchComp @clear="clearHandle">
            <RowItem label="用户名称" :count="1">
                <el-input clearable placeholder="请输入关键字搜索用户名称" v-model="personQuery.name" prefix-icon="Search"
                    @input="Search" style="width: 100%">
                </el-input>
            </RowItem>
            <RowItem label="操作端" :count="2">
                <el-select v-model="personQuery.flag" @change="Search" style="width:100%;" clearable
                    placeholder="请选择状态">
                    <!-- 操作端 1=>手机端  2=>管理后台  3=>数据大屏 -->
                    <!-- <el-option label="手机端" value="1"></el-option> -->
                    <el-option label="管理后台" value="2"></el-option>
                    <el-option label="数据大屏" value="3"></el-option>
                </el-select>
            </RowItem>
            <RowItem label="操作事件" :count="3">
                <el-input clearable placeholder="请输入关键字搜索操作事件" v-model="personQuery.events" prefix-icon="Search"
                    @input="Search" style="width: 100%">
                </el-input>
            </RowItem>
            <RowItem label="操作时间" :count="4">
                <el-date-picker v-model="pickerDate" style="width:100%;box-sizing: border-box;"
                    value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="至" clearable
                    start-placeholder="开始日期" end-placeholder="结束日期" @change="handleChange">
                </el-date-picker>
            </RowItem>
        </SearchComp>
        <Table :data="tableData" :config="tableConfig" :showLoading="loading" :total="total" @sizeChange="sizeChange"
            @CurrentChange="CurrentChange" @handleEdit="handleEdit">
        </Table>
        <DelModule :delModuleShow="delModuleShow" @modelCancel=modelCancel :dataInfo="dataInfo"></DelModule>
    </div>
</template>
<script setup lang="ts">
import $util from '../../util/util'
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 引入专属的request配置
import { logList } from '../Api/index'
import { PiniaStore } from '../../store'
import DelModule from './DelModule.vue'
const delModuleShow = ref(false)
const store = PiniaStore()
const loading = ref(false)
const pickerDate = ref([])
const personQuery = reactive<any>({
    name: '',
    events: '',
    flag: '',
    start_time: '',
    end_time: '',
    page: 1,
    page_size: 10,
})
const Search = $util.debounce((val: string | number) => {
    personQuery.page = 1
    getList()
}, 500)
// 时间控件选择触发
const handleChange = async (value: any) => {
    if (value !== null) {
        personQuery.start_time = value[0]
        personQuery.end_time = value[1]
    } else {
        personQuery.start_time = ''
        personQuery.end_time = ''
    }
    personQuery.page = 1
    getList()
}
// 点击清空条件触发
const clearHandle = () => {
    personQuery.name = ''
    personQuery.events = ''
    personQuery.flag = ''
    personQuery.start_time = ''
    personQuery.end_time = ''
    pickerDate.value = []
    personQuery.page = 1
    getList()
}
// 表格数据
const total = ref(0)
const tableData = ref<any>([])
const tableConfig = ref([
    { name: 'index', label: '序号', width: '60', type: 'index', checked: true },
    { name: 'name', label: '用户名称', type: 'change', width: '', checked: true },
    { name: 'events', label: '操作事件', type: 'change', width: '', checked: true },
    {
        name: 'flag',
        label: '操作端',
        width: '',
        checked: true,
        type: 'status',
        formatter: [
            // 操作端 1=>手机端  2=>管理后台  3=>数据大屏
            { name: 1, label: '手机端' },
            { name: 2, label: '管理后台' },
            { name: 3, label: '数据大屏' }
        ]
    },
    { name: 'source_ip', label: '来源IP', type: 'change', width: '', checked: true },
    { name: 'remake', label: '备注', type: 'change', width: '', checked: true },
    { name: 'log_create_time', label: '操作时间', type: 'change', width: '', checked: true },
    {
        name: '',
        label: '操作',
        width: '120',
        fixed: 'right',
        type: 'edit',
        checked: true,
        formatter: [
            { name: 'Detail', label: '查看详情', font: true, link: true },
        ]
    }
])
// 获取角色列表
const getList = async () => {
    loading.value = true
    const res: any = await logList(personQuery)
    tableData.value = res.data
    total.value = res.total
    loading.value = false
}
const dataInfo = ref<any>({})
const handleEdit = async (item: any, name: string) => {
    if (name === 'Detail') {
        dataInfo.value = item
        delModuleShow.value = true
    }
}
// 点击翻页器的长度
const sizeChange = () => {
    personQuery.page_size = store.pageQuery.page_size
    getList()
}
// 点击翻页器的页码
const CurrentChange = () => {
    personQuery.page = store.pageQuery.page
    getList()
}
const modelCancel = (bol: boolean) => {
    delModuleShow.value = bol
}
onMounted(() => {
    getList()
})
</script>
<style lang="scss" scoped></style>